<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p2_CSS选择器</title>

    <style>
<!--        标签名选择器-->
        h4{
            background-color: red;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    /*    id选择器*/
#d2{
    border: 5px solid red;
}
/*类选择器*/
.error{
    background-color: red;
}
.success{
    background-color: green;
}
.msg{
    color: white;
}
/*群组选择器：用逗号隔开，是“或”的关系，只要满足其中一个选择器条件即可被选中*/
#d2,h4,.error{
    text-decoration: underline;
}
/*通用选择器：选中所有的元素*/
*{
    font-style: italic;
}
    /*属性选择器*/
[type="text"]{
    background-color: yellow;
}
并列选择器：两个选择器紧挨在一起，是“与”的关系，必须同时满足两个选择器条件才能被选中*/
    /*最难理解：伪类选择器(固定好的单词：a 表示连接标签名 :link是伪类选择器)*/
a:link{ /* 选中超链接未被访问过的状态*/
    color: gray;
}
a:visited{ /* 选中超链接已被访问过的状态*/
    color: green;
}
a:hover{ /* 选中超链接悬停的状态*/
    color: orange;
}
a:active{ /* 选中超链接激活的状态*/
    color: red;
}
    /*后代选择器*/
#d1 span{
    color: cyan;
}
    /*直接子代选择器*/
#d1>div>span{
    color: red;
}
#d3:hover{
    background-color: purple;
    width: 1090px;
    height: 1000px;
}
    </style>
</head>
<body>
<div id="d1">
    <span>1</span>
    <div>
        <span>2</span>
        <p>测试文字</p> <br>
        <p>我是 <span>测试</span>段落</p>
    </div>
    <span>3</span>
</div>
<a href="https://www.baidu.com">超链接1</a>
<a href="abc">超链接2</a>
    <h4>我是标题</h4>
    <p>我是段落</p>
    <h4 id="d2">我是标题</h4>
    <a href="#">我是超链接</a>
    <div>我是div1</div>
    <div>我是div2</div>
    <div id="d3">我是div3</div>
    <hr>
    <span class="error msg" >用户名已被占用</span>
    <span class="error msg" >密码长度不正确</span>
    <span class="error msg" >两次密码不一致</span>
        <br>
    <span class="success msg" >用户名可以使用</span>
    <span class="success msg" >手机号已验证</span>
    <span class="success msg" >邮箱格式正确</span>
        <hr>
    <input type="text">
    <input type="password">

</body>
</html>